	<?php $this->load->view('common/head')?>
	
	<!-- Begin of Sidebar -->
	<?php $this->load->view('common/sidebar')?>
	
	<?php /*********************************/ ?>
<style>

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    background:#FF9797; text-align:center; 
}
.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}
.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}

.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("<?php echo base_url()?>template/grape/img/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:11px;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}
</style>	

 <script type="text/javascript" src="<?php echo base_url()?>template/grape/js/fileuploader.js"></script>
 <script type="text/javascript" src="<?php echo base_url()?>template/tiny_mce/jquery.tinymce.js"></script>

<div id="main" role="main">
	
	<!-- Begin of titlebar/breadcrumbs -->
			<div id="title-bar">
				<ul id="breadcrumbs">
					<li><a href="<?php echo site_url()?>" title="Home"><span id="bc-home"></span></a></li>
					<li><a href="<?php echo site_url('mail/template')?>" title="Mail">Mail</a></li>
					<li class="no-hover">Templates</li>
				</ul>
			</div> <!--! end of #title-bar -->
			
			<div class="shadow-bottom shadow-titlebar"></div>
			
			<!-- Begin of #main-content -->
			<div id="main-content">
				<div class="container_12">
	
				<div class="grid_12">
			
					<div id="file-uploader">       
						<noscript>          
							<p>Please enable JavaScript to use file uploader.</p>
							<!-- or put a simple form for upload here -->
						</noscript>         
					</div>

							
					<div class="_25">
						<select id="template" onChange="set_temp(this.value)">
							<option id="zero" value="0">Select a Template</option>
							<?php foreach($templates as $template):?>
								<option id="temp_<?php echo $template->id?>" value="<?php echo $template->id?>"><?php echo $template->subject?></option>
							<?php endforeach;?>
						</select>
					</div>
					
					<div>
						<button class="" onclick="new_template()">Add New Template</button>
						<button style="display:none" id="del" onclick="del_temp()">Delete This Template</button>
						<button style="display:none" id="prv" onclick="send_preview()">Send Preview to Me</button>  
					</div>

					<div class="clear"></div>
					<br>
					<form id="form" class="block-content form" action="<?php echo site_url('mail/template_save')?>" method="post">
						<input type="hidden" name="id" id="id" value="0" />
						<p class="_50 inline-medium-label">
						<label for="subject" rel="tooltip" title="subject">Subject</label>
						<input id="subject" name="subject" class="required" type="text" value="" />
						</p>
							

						<div class="_75">
							<p><label for="content">Content</label>
							<textarea id="content" name="content" class="tinymce required" rows="2" cols="40"></textarea></p>
						</div>
						<div class="clear"></div>
					
						
						

						<div class="clear"></div>
						<div class="block-actions">
							<ul class="actions-left">
								<li><a class="button red" id="reset-validate-form" href="javascript:void(0);">Reset</a></li>
							</ul>
							<ul class="actions-right">
								<li><input type="submit" class="button" value="Save!"></li>
							</ul>
						</div>
					</form>

				</div>
		</div>
		</div>
		</div>
				
				
	<script type="text/javascript">
	var uploader = new qq.FileUploader({
		// pass the dom node (ex. $(selector)[0] for jQuery users)
		element: document.getElementById('file-uploader'),
		// path to server-side upload script
		action: '<?php echo site_url('mail/upload')?>',
		
		multiple: false,
		allowedExtensions: ["jpg","jpeg","gif", "png"],
		onComplete: function(id, fileName, responseJSON){
			if(responseJSON.success)
				$(".qq-upload-file:last:contains("+fileName+")").next().next().css('color','green').append(' Success')
			else
				$(".qq-upload-file:last:contains("+fileName+")").next().next().css('color','red').append(' Failed')
		
		}
	});
	
	function send_preview()
	{
		var id = $('#id').val();
		if(id==0)
			return 0;
		$.post('<?php echo site_url('mail/preview')?>/',{ temp_id: id },function(data){
			newdata = $.parseJSON(data);
				if(newdata[<?php echo $this->session->userdata['user_id']?>].result)
					alert('A preview has been sent to: '+newdata[<?php echo $this->session->userdata['user_id']?>].email)
				else
					alert('Error: We Can not send to this Email "'+newdata[<?php echo $this->session->userdata['user_id']?>].email+'" right now, please try in few min.\nThanks...')
			})
	
	}
	
	function del_temp()
	{
		var id = $('#id').val();
		if(id==0)
			return 0;
		$.post('<?php echo site_url('mail/delete_template')?>/'+id,function(data){
			newdata = $.parseJSON(data);
			if(newdata.error)
				$.jGrowl($('#subject').val() +' '+newdata.msg, { 'Error': 'error',position:'center'  });
			else{
				$.jGrowl($('#subject').val() +' '+newdata.msg, { 'Deleted': 'error',position:'center'  });
				$('#temp_'+id).hide();
				new_template();
			}
		});
	}
	
	function new_template()
	{
		$('#id').val(0);
		$('#subject').val('');
		$('#content').val('');
		$('#subject').focus();
		$('#del').fadeOut();
		$('#prv').fadeOut();
		$('#zero').attr('selected','selected');
		
	}
	
	function set_temp(id)
	{
		if(id==0){
			new_template();
			return 0;
		}
			
		$.post('<?php echo site_url('mail/template/')?>/'+id, function(data){
			
			$('#id').val(data[0].id);
			$('#subject').val(data[0].subject);
			$('#content').val(data[0].content);
			$('#subject').focus();
			$('#del').fadeIn().effect("highlight", {}, 3000);
			$('#prv').fadeIn().effect("highlight", {}, 3000);
		},'json');
	}					
	
	$().ready(function() {
		
		$('#content').tinymce({
			// Location of TinyMCE script
			script_url : '<?php echo base_url()?>template/tiny_mce/tiny_mce.js',

			// General options
			theme : "advanced",
			plugins : "autolink,lists,pagebreak,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

			// Theme options
			theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,fullscreen",
			//theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			// Example content CSS (should be your site CSS)
			//content_css : "css/content.css",

			// Drop lists for link/image/media/template dialogs
			template_external_list_url : "lists/template_list.js",
			external_link_list_url : "lists/link_list.js",
			external_image_list_url : "<?php echo site_url('mail/uploaded_images')?>",
			media_external_list_url : "lists/media_list.js",
			// URL
			relative_urls : false,
			remove_script_host : false,
			document_base_url : "<?php base_url()?>",
			//document_base_url : "http://grape.dotssol.com/ci/",
			convert_urls : true
		});
		
		
		/** Submit Form **/
		$("#form").validate({
				rules:{},
				messages: {},
				submitHandler: function(form) {
				   //submit
				$.post("<?php echo site_url('mail/template_save')?>", $("#form").serialize(),
					function(data){
						if(data){

							newdata = $.parseJSON(data);
							
							Gtheme = 'saved';
								$.jGrowl($('#subject').val() +' Added', { theme: Gtheme,position:'center'  });
								
								
							temp_id 		= $("#id").val();
							temp_subject 	= $("#subject").val();
							//clear the folrm
								new_template();
								$(":input").not(":button, :submit, :reset, :hidden").each(function () {
									this.value = '';
								});
								
							if(temp_id == 0) 
								$('#template').append('<option id="temp_'+newdata.id+'" value="'+newdata.id+'">'+temp_subject+'</option>');
							
						}
						else{
							$.jGrowl("Error!", { theme: 'error' });
						}
					});
				}
			});
		/** End Submit Form **/
		
		});
		
		
    </script>

	<?php /*********************************/ ?>



	<?php /*********************************/ ?>
	<!-- Begin of footer -->
	<?php $this->load->view('common/footer')?>
